<!-- 活动类型管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {} }">
        <GzTextUp v-model:value="searchData['activityTemplateNo']" placeholder="活动模板编号" />
        <GzTextUp v-model:value="searchData['templateName']" placeholder="活动模板名称" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['activityTypeNo']" placeholder="活动类型" :options="vdata.typeOptions" :field-names="{ label: 'activityTypeName', value: 'activityTypeNo' }" />
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="templateNo"
        :pageSize="5"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_ACTIVITY_TEMPLATE_INFO_ADD')" type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'templateImg'">
            <a-image v-if="record.templateImg" :src="record.templateImg" />
            <img v-else src="@/assets/svg/default-img.svg">
          </template>
          <template v-if="column.key == 'previewImg'">
            <a-image :src="record.previewImg" />
          </template>
          <template v-if="column.key == 'activityTypeNo'">
            {{ getActivityTypeName(record.activityTypeNo) }}
          </template>
          <template v-if="column.key == 'operation'">
            <a-button v-if="$access('ENT_ACTIVITY_TEMPLATE_INFO_EDIT')" type="link" @click="addOrEditFunc(record)">修改</a-button>
            <a-button v-if="$access('ENT_ACTIVITY_TEMPLATE_INFO_DEL')" type="link" danger @click="activityTypeDelete(record.activityTemplateNo)">删除</a-button>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增OR修改 -->
    <AddOrEdit ref="addOrEditRef" :callBackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import AddOrEdit from './AddOrEdit.vue'
import { req, API_URL_ACTIVITY_TEMPLATE, API_URL_ACTIVITY_TYPE } from '@/api/manage'
import{$getActiveTemplateList,$activityTemplateEdit,$activityTemplateDelete} from '@/api/activityManage/activityTemplate/index'
import{$getActiveList,} from '@/api/activityManage/activityType/index'

import { ref, reactive, getCurrentInstance, computed } from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


const infoTableRef = ref()
const addOrEditRef = ref()

const vdata:any = reactive({
  typeOptions: [],  // 活动类型
})

const tableColumns = reactive([
  { key: 'activityTemplateNo', title: '活动模板编号',dataIndex: 'activityTemplateNo', fixed: 'left' },
  { key: 'templateName', title: '活动模板名称',dataIndex: 'templateName', },
  { key: 'templateImg', title: '活动模板图片',dataIndex: 'templateImg', },
  //{ key: 'previewImg', title: '预览小程序图片',dataIndex: 'previewImg', },
  //{ key: 'litePath', title: '小程序页面路由',dataIndex: 'litePath', },
  // { key: 'activityTypeName', title: '活动类型名称',dataIndex: 'activityTypeName', width: 140 },
  { key: 'activityTypeNo', title: '活动类型',dataIndex: 'activityTypeNo', },
  { key: 'operation', title: '操作', dataIndex: 'operation',  fixed: 'right', align: 'center' }
])
const searchData:any = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $getActiveTemplateList(params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}
// 新增OR修改
function addOrEditFunc(record){
  addOrEditRef.value.show(record)
}
// 删除卡券
function activityTypeDelete(activityTemplateNo){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前模板？', () => {
    $activityTemplateDelete(activityTemplateNo ).then(res => {
      $infoBox.message.success('删除成功！')
      infoTableRef.value.refTable(true)
    })
  })
}
// 请求活动类型
function getActivityType(){
  $getActiveList({}).then(res => {
    vdata.typeOptions = res.records
  })
}
getActivityType()

// 处理活动类型（id转name）
const getActivityTypeName = computed(()=>(id)=>{
  let activityTypeName = ''
  for(let v of vdata.typeOptions){
    if(v.activityTypeNo == id){
      activityTypeName = v.activityTypeName
      break
    }
  }
  return activityTypeName
})

</script>
<style lang="less" scoped>
:deep(img){
  width: 80px;
  height: 80px;
  object-fit: cover;
}
</style>